<template>
  <div class="test-select">
    <h1>Select 选择器</h1>
    <p>当选项过多时，使用下拉菜单展示并选择内容。</p>
    <h2>基础用法</h2>
    <Select v-model="testDefaultValue" clearable @on-change="onChange(arguments)">
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"/>
    </Select>
    <Button type="primary" @click="changeDefaultValue">改变默认值</Button>
    <p> <code>v-model</code> 的值为当前被选中的 <code>Option</code> 的 <code>value</code> 属性值</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Select v-model=&quot;defaultValue&quot; &gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;/&gt;
        &lt;/Select&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            defaultValue: '1',
            selectData: [
              {
                label: '北京',
                value: 'beijing'
              },
              {
                label: '上海',
                value: 'shanghai'
              },
              {
                label: '重庆',
                value: 'chongqing'
              },
              {
                label: '杭州',
                value: 'hangzhou'
              },
              {
                label: '成都',
                value: 'chengdu'
              },
              {
                label: '武汉',
                value: 'wuhan'
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>禁用</h2>
    <Select disabled v-model="defaultValue1">
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"
        :disabled="o.disabled"/>
    </Select>
    <Select v-model="defaultValue1">
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"
        :disabled="o.disabled"/>
    </Select>
    <p>通过给 <code>Select</code> 设置属性 <code>disabled</code> 禁用整个选择器。</p>
    <p>通过给 <code>Option</code> 设置属性 <code>disabled</code> 可以禁用当前项。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Select disabled v-model=&quot;defaultValue1&quot;&gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;
            :disabled=&quot;o.disabled&quot;/&gt;
        &lt;/Select&gt;
        &lt;Select v-model=&quot;defaultValue1&quot;&gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;
            :disabled=&quot;o.disabled&quot;/&gt;
        &lt;/Select&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            defaultValue: '1',
            selectData: [
              {
                label: '北京',
                value: 'beijing'
              },
              {
                label: '上海',
                value: 'shanghai',
                disabled: true
              },
              {
                label: '重庆',
                value: 'chongqing'
              },
              {
                label: '杭州',
                value: 'hangzhou',
                disabled: true
              },
              {
                label: '成都',
                value: 'chengdu'
              },
              {
                label: '武汉',
                value: 'wuhan',
                disabled: true
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>多选</h2>
    <Select multiple v-model="defaultValue2">
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"/>
    </Select>
    <p>通过设置属性 <code>multiple</code>可以开启多选模式。多选模式下，<code>model</code> 接受数组类型的数据，所返回的也是数组。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Select multiple v-model=&quot;defaultValue&quot;&gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;/&gt;
        &lt;/Select&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            defaultValue: ['1'],
            selectData: [
              {
                label: '北京',
                value: 'beijing'
              },
              {
                label: '上海',
                value: 'shanghai',
                disabled: true
              },
              {
                label: '重庆',
                value: 'chongqing'
              },
              {
                label: '杭州',
                value: 'hangzhou',
                disabled: true
              },
              {
                label: '成都',
                value: 'chengdu'
              },
              {
                label: '武汉',
                value: 'wuhan',
                disabled: true
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <P>开启搜索</P>
    <Select
      v-model="defaultValue3"
      :isLoading="isFeach"
      :remoteSearch="searchCallBack"
      :scrollBottom="scrollCallBack"
      clearable
      filterable>
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"
        :disabled="o.disabled"/>
    </Select>
    <Select
      v-model="defaultValue4"
      filterable
      multiple >
      <Option v-for="(o, i) in selectData"
        :key="i"
        :value="o.value"
        :label="o.label"
        :disabled="o.disabled" />
    </Select>
    <Select filterable multiple />
    <p>通过设置属性 <code>filterable</code> 可以开启搜索模式。单选和多选都支持搜索模式。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Select
          v-model=&quot;defaultValue3&quot;
          filterable&gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;
            :disabled=&quot;o.disabled&quot;/&gt;
        &lt;/Select&gt;
        &lt;Select
          v-model=&quot;defaultValue4&quot;
          filterable
          multiple &gt;
          &lt;Option v-for=&quot;(o, i) in selectData&quot;
            :key=&quot;i&quot;
            :value=&quot;o.value&quot;
            :label=&quot;o.label&quot;
            :disabled=&quot;o.disabled&quot; /&gt;
        &lt;/Select&gt;
        &lt;Select filterable multiple /&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data(){
          return{
            defaultValue: ['1'],
            selectData: [
              {
                label: '北京',
                value: 'beijing'
              },
              {
                label: '上海',
                value: 'shanghai',
                disabled: true
              },
              {
                label: '重庆',
                value: 'chongqing'
              },
              {
                label: '杭州',
                value: 'hangzhou',
                disabled: true
              },
              {
                label: '成都',
                value: 'chengdu'
              },
              {
                label: '武汉',
                value: 'wuhan',
                disabled: true
              }
            ]
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Select props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <p>Option props</p>
    <Table :columns="tableColumn" :data="tableData1"></Table>
    <p>Select events</p>
    <Table :columns="tableColumn1" :data="tableData2"></Table>
  </div>
</template>

<script>
/** ******select*******
 * filterable: 支持搜索
 * multiple: 多选
 * disabled: 禁用
 * clearable: 清除按钮,
 * placeholder: 占位符
 * prefix: select前图标
 */
export default {
  name: 'TestSelect',
  data () {
    return {
      isFeach: false, // 是否请求数据中
      testDefaultValue: 'beijing',
      defaultValue1: 'beijing',
      defaultValue2: ['shanghai'],
      defaultValue3: 'beijing',
      defaultValue4: ['shanghai', 'chengdu'],
      selectData: [
        {
          label: '北京哇好大好玩',
          value: 'beijing'
        },
        {
          label: '上海',
          value: 'shanghai',
          disabled: true
        },
        {
          label: '重庆',
          value: 'chongqing'
        },
        {
          label: '杭州',
          value: 'hangzhou',
          disabled: true
        },
        {
          label: '成都',
          value: 'chengdu'
        },
        {
          label: '武汉',
          value: 'wuhan',
          disabled: true
        },
        {
          label: '西安',
          value: 'xian',
          disabled: true
        },
        {
          label: '青岛',
          value: 'qingdao',
          disabled: true
        }
      ],
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain',
          tooltip: true
        },
        {
          title: '类型',
          key: 'type'
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableData: [
        {
          attribute: 'v-model',
          explain: '指定选中项目的 value 值，可以使用 v-model 双向绑定数据。',
          type: 'String | Number | Array',
          default: '空'
        },
        {
          attribute: 'multiple',
          explain: '是否支持多选',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'clearable',
          explain: '是否可以清空选项，只在单选时有效',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'filterable',
          explain: '是否支持搜索',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'size',
          explain: '选择框大小，可选值为large、small、default或者不填',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'placeholder',
          explain: '选择框默认文字',
          type: 'String',
          default: '请选择'
        },
        {
          attribute: 'placement',
          explain: '弹窗的展开方向，可选值为 top,bottom,top-start,bottom-start,top-end,bottom-end',
          type: 'String',
          default: 'bottom-start'
        }
      ],
      tableData1: [
        {
          attribute: 'value',
          explain: '选项值，默认根据此属性值进行筛选，必填',
          type: 'String | Number',
          default: '无'
        },
        {
          attribute: 'label',
          explain: '选项显示的内容，默认会读取 slot，无 slot 时，优先读取该 label 值。',
          type: 'String',
          default: '-'
        },
        {
          attribute: 'disabled',
          explain: '是否禁用',
          type: 'Boolean',
          default: 'false'
        }
      ],
      tableColumn1: [
        {
          title: '事件名',
          key: 'name'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '返回值',
          key: 'callback'
        }
      ],
      tableData2: [
        {
          name: 'on-change',
          explain: '选中的Option变化时触发',
          callback: 'value'
        }
      ]
    }
  },
  watch: {
    defaultValue: {
      deep: true,
      handler: function (value) {
        console.log('defaultValue', value)
      }
    }
  },
  methods: {
    changeDefaultValue () {
      this.testDefaultValue = 'shanghai'
    },
    onChange (node) {
      // console.log('on-change事件', node)
    },
    searchCallBack (val) {
      console.log('searchCallBack', val)
    },
    scrollCallBack () {
      // console.log('scrollCallBack')
      // 在这里请求后台，拿新的数据，和原数组进行拼接
      this.isFeach = true
      setTimeout(() => {
        // 更新loading状态
        this.selectData.push({
          label: '我是新来的',
          value: '我是新来的'
        })
        this.isFeach = false
      }, 1000)
    }
  }
}
</script>

<style scoped lang="less">
h1 {
  font-size: 18px;
}
h2 {
  font-size: 14px;
  margin-bottom: 10px;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 10px 0;
}
</style>
